<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>使用float实现定位</title>

        <style type="text/css">
            h3 { text-align: center ; }
            p { text-align: center ; }

            .wrapper { border: 1px solid blue ; width: 800px ; height: 50px ; margin: 25px auto ; }

            .first>* { display: inline-block ; background-color: #dedede ; width: 60px ; height: 40px ; }

            .second>* { float: left ; background-color: #dedede ; width: 60px ; height: 40px ; margin: 5px ; }

            .third>* { float: right ; background-color: #dedede ; width: 60px ; height: 40px ; margin: 5px ; }

        </style>

    </head>
    <body>

        <h3>使用float实现定位</h3>
        <p>这是一种不务正业的定位方式</p>

        <div class="wrapper first">
            <u>李渊</u>
            <ins>李建成</ins>
            <i>李世民</i>
            <em>滕王</em>
            <s>李治</s>
            <del>武则天</del>
            <b>狄仁杰</b>
            <strong>狄春</strong>
            <span>李元芳</span>
        </div>

        <div class="wrapper second">
            <u>李渊</u>
            <ins>李建成</ins>
            <i>李世民</i>
            <em>滕王</em>
            <s>李治</s>
            <del>武则天</del>
            <b>狄仁杰</b>
            <strong>狄春</strong>
            <span>李元芳</span>
        </div>

        
        <div class="wrapper third">
            <u>李渊</u>
            <ins>李建成</ins>
            <i>李世民</i>
            <em>滕王</em>
            <s>李治</s>
            <del>武则天</del>
            <b>狄仁杰</b>
            <strong>狄春</strong>
            <span>李元芳</span>
        </div>
        
    </body>
</html>